บทความด้านคอมพิวเตอร์

บทความ, องค์ความรู้, การทำเว็บไซต์, ทำโปรแกรม

ค้นหา และศึกษาบทความด้านคอมพิวเตอร์ การเขียนเว็บไซต์ ทำเว็บไซต์ ทำโปรแกรม ทำโปรแกรมบนมือถือ ออกแบบเว็บไซต์ การเขียนโปรแกรม การออกแบบเว็บไซต์ ฐานข้อมูล รวมไปถึงข่าวแวดวง IT, Computer และบทความต่าง ๆ ที่ถูกคัดสรรมาอย่างดี ด้วยเนื้อหาที่สดใหม่ กระชับ และอ่านเข้าใจง่าย ซึ่งจะทำให้คุณสามารถที่จะแก้ไขปัญหาต่าง ๆ จากบทความ และองค์ความรู้ที่ทางเราเลือกมาให้ โดยบทความทุกบทความถูกเขียนขึ้นใหม่ ในเรื่องต่าง ๆ เพื่อนำเสนอมุมมองใหม่ ๆ ให้กับผู้อ่านทุกคน


ประเภทบทความ
บทความด้านคอมพิวเตอร์

    วิธีการวาง DIV CSS ในแถวเดียวกัน แบบไม่ตกบรรทัด

    บทความวันที่ 18 ธันวาคม 2555

    บทความนี้ขอกล่าวถึงเรื่อง วิธีการวาง DIV CSS ในแถวเดียวกัน แบบไม่ตกบรรทัด ซึ่งใช้ในกรณีที่มีการวาง DIV ให้อยู่ในแนวเดียวกัน และอยู่ใกล้กัน 

     

    ภาพรวมของวิธีการวาง DIV CSS ในแถวเดียวกัน แบบไม่ตกบรรทัด

    1. ใช้คำสั่ง float ในการระบุให้ DIV ที่ต้องการ ให้สามารถวางในแถวเดียวกันได้

    2. ถ้าในกรณีที่ต้องการให้ DIV อยู่ฝั่งซ้าย ให้กำหนด Value = left

    3. ถ้าในกรณีที่ต้องการให้ DIV อยู่ฝั่งขวา ให้กำหนด Value = right

     

    ตัวอย่างโปรแกรม

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>amplysoft.com</title>
</head>
<body>
<style type="text/css">
#div1 {
	float:left;
	width:100px;
	height:100px;
	border:solid 2px red;
	text-align:center;
}
#div2 {
	float:left;
	width:100px;
	height:100px;
	border:solid 2px green;
	text-align:center;
}
</style>

<div id='div1'>DIV1</div>
<div id='div2'>DIV2</div>

</body>
</html>

     

    ผลลัพธ์


    อ่านเนื้อหาอื่นเพิ่มเติมฟรี ได้ที่
    Devdit - พบคำตอบด้านไอทีและทำตามง่ายๆ



    คำค้นหา วิธีการวาง DIV CSS ในแถวเดียวกัน แบบไม่ตกบรรทัด, รับเขียนเว็บ, รับทำเว็บ, เรียนเขียนโปรแกรม